<template>
  <div class="contain">
    <div class="searchAll">
      <router-link :to="`/citylist?label=${label}`">
        <div class="list">
          <span>{{ adress.label }}</span>
          <i class="bian"></i>
          <span class="shu"></span>
        </div>
      </router-link>

      <router-link to="/search">
        <div class="search">
          <i class="iconfont icon-seach"></i>
          <span>请输入小区地址</span>
        </div>
      </router-link>
    </div>
    <router-link :to="{ name: 'cityMap', params: { id: cityId } }">
      <div class="map">
        <i class="iconfont icon-map"></i>
      </div>
    </router-link>
  </div>
</template>

<script>
import { getId} from '@/utils/auth'
export default {
  name: "searchList",
  props: ["cityId", "label"],
  data() {
    return {
      adress: JSON.parse(getId())||{"label":"北京","value":"AREA|88cff55c-aaa4-e2e0"},
    };
  },
};
</script>

<style lang="less">
.contain {
  z-index: 999;
  height: 0.90667rem;
  position: relative;
  font-size: 1rem;
  position: absolute;
  top: 0.66667rem;
  margin: 0 0 0 0.3rem;

  .searchAll {
    border-radius: 10px;

    width: 7.6875rem;
    background-color: #fff;
    float: left;
    display: flex;
    margin: 0 0.26667rem;
    line-height: 1.2rem;
    padding-right: 0.5rem;
    .list {
      margin-left: 20px;
      font-size: 0.42667rem;
      flex: 1;
      color: #4a4a4a;
      .shu {
        height: 1.05rem;
        border: 0.03125rem solid #f1f1f1;

        margin: 0 1.25rem;
      }
      .bian {
        position: absolute;
        top: 33px;
        left: 1.66667rem;
        width: 0;
        height: 0;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-top: 20px solid #7f7f80;
      }
    }
    .search {
      font-size: 0.34667rem;
      flex: 4;
      color: #9ea1a3;
      position: relative;
      margin-left: 50px;

      .icon-seach {
        font-size: 0.5rem;
        position: absolute;
        left: -0.6875rem;
        top: 0;
      }
    }
  }
  .map {
    .icon-map {
      font-size: 0.8rem;
      // color: #f1f1f1
      position: absolute;
      right: -0.6875rem;
      top: 0.25rem;
    }
  }
}
</style>
